<template>
	<view v-if="_value.title" class="g-seal" :title="_value.title || ''" :style="{ color: _value.color }"><text style="opacity: .4;">&#xe622;</text></view>
</template>

<script>
export default {
	props: {
		value: {}
	},
	computed: {
		_value() {
			if (this.value instanceof Object) {
				return this.value;
			}
			return {
				title: '',
				color: ''
			};
		}
	}
};
</script>

<style scoped lang="scss">
@font-face {
	font-family: 'card-icon';
	src: url('iconfont.woff') format('woff');
}
.g-seal {
	font-family: 'card-icon';
	font-size: 60px;
	width: 1em;
	height: 1em;
	line-height: 1em;
	transform: rotate(30deg);
	z-index: 99999;
	opacity: 0.8;
	&::after {
		content: attr(title);
		position: absolute;
		top: 0;
		left: -50%;
		right: -50%;
		text-align: center;
		font-size: 0.23em;
		white-space: nowrap;
	}
}
</style>
